<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <link rel="stylesheet" type="text/css" href="../static/style.css">
    </head>
    
    <body>
    
        <div class="header">
            <h2>页眉</h2>
        </div>

        <div>
            <div class="column side">
                <h4>垂直导航条</h4>
                    <div class="side_nav">
                        <div class="nav_l1" >
                            <span class="nav_l1_text">一级标题11</span>
                        </div>
                        <div class="nav_l1_box" >
                            <div class="nav_l2">
                                <span class="nav_l2_text">二级标题1</span>
                            </div>
                            <div class="nav_l2">
                                <span class="nav_l2_text">二级标题2</span>
                            </div>
                            <div class="nav_l2">
                                <span class="nav_l2_text">二级标题3</span>
                            </div>
                        </div>
                    </div>
            </div>

            <div class="column content">
            abc
            </div>
        </div>
    </body>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.nav_l1').click(
                function(val){
                    //$('.content').html(marked.parse("*Write* your **Markdown** here"));
                    console.log($(this).children()[0].innerText);//点击一级标题，打印点击的栏目
                    $('.content').html($(this).children()[0].innerText);//在内容页显示点击的按钮文字
                    if($(this).next().is(":hidden")){//如果二级导航没打开，打开它
                        $(this).next().show(500);
                    }
                    else if($(this).next().children().length==0){}//如果没有二级导航，没操作
                    else{//如果二级导航打开了，关闭它
                        $(this).next().hide(500)
                    }	
                }
            );

            $('.nav_l2').click(//点击二级标题触发事件
                function(val) {
                    $('.content').html(marked.parse("*Write* your **Markdown** here"));
                }
            )

        })
    </script>
</html>

